import React, { Component, Ref, MouseEventHandler } from "react";
import { Card, Row, Col, message, Modal, Form, Table, Button, Input } from "antd";
import { FormComponentProps, FormCreateOption } from "antd/lib/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";
import { ColumnProps, SortOrder } from "antd/es/table";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { TableRowSelection, SorterResult } from "antd/es/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatSex, formatInterest } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, UserInfo, FromField, StandardFromProps } from "../../utils/interface";

import FilterFrom from "../../compoment/baseForm/index";

import "./index.less";

interface IProps {}
interface IStates {}

const formCreateOption: FormCreateOption<FormComponentProps> = {
	name: "subForm-test",
	onValuesChange: (props: any, changedValues: any, allValues: any) => {
		console.log(props);
		console.log(changedValues);
		console.log(allValues);
	},
};

const formList: Array<FromField> = [
	{
		type: "input",
		label: "输入框",
		field: "field1",
		placeholder: "输入框",
		initValue: "",
		width: "100",
		key: "0",
		rules: [
			{
				required: true,
				message: "必填字段",
			},
			{
				min: 5,
				message: "最少5个字符",
			},
		],
	},
	{
		type: "select",
		label: "下拉框",
		field: "field2",
		placeholder: "下拉框",
		initValue: "",
		width: "120",
		key: "1",
		rules: [
			{
				required: true,
				message: "必填字段",
			},
		],
		optionLists: [
			{
				key: "1",
				label: "option1",
				value: "1",
			},
			{
				key: "2",
				label: "option2",
				value: "2",
			},
		],
	},
];

// const WrapSubForm = Form.create<FormComponentProps>(formCreateOption)(SubForm);
const WrapFilterFrom = Form.create<StandardFromProps>(formCreateOption)(FilterFrom);

class NormalFormPage extends React.Component<IProps, IStates> {
	SubForm1: any;
	SubForm2: any;
	standardFrom: any;

	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {};
	}

	componentDidMount() {
		// this.requestStandardDatas();
	}

	handleSubmit(event: React.MouseEvent<HTMLElement, MouseEvent>) {
		event.persist();
		let standardFromValue = this.standardFrom.props.form.getFieldsValue();
		console.log(standardFromValue);
		console.log(event);
	}

	// handleSubmit = () => {
	// 	debugger;
	// 	let standardFromValue = this.standardFrom.props.form.getFieldsValue();
	// 	console.log(standardFromValue);
	// };

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>子组件表单</h1>
				</div>
				<Card title="子组件表单测试" className="button-wrap">
					<Row>
						<Col span={24}>
							<div>
								<WrapFilterFrom
									formList={formList}
									handleSubmit={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
										this.handleSubmit(e);
									}}
									wrappedComponentRef={(form: any) => (this.standardFrom = form)}
								></WrapFilterFrom>
							</div>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default NormalFormPage;
